<template>
  <section>
    <el-row :gutter="40">
      <el-col :span="12">
        <el-row>
          <el-row class="imgBox" v-for="(item,index) in currAds" :key="item.id" @click.native="checkCurrItem(item)">
            <i class="el-icon-error" @click.stop="delItem(item)"/>
            <i class="el-icon-picture" v-if="item.img === ''"/>
            <img v-else :src="item.img" style="width: 95%"/>
          </el-row>
          <el-row class="imgBox">
            <i class="el-icon-plus"  @click="addBtn"></i>
          </el-row>
        </el-row>
      </el-col>
      <el-col :span="12" v-if="currItem">
        <upload-img v-on:get="getImgUrl($event,item)"></upload-img>
        <el-input size="mini" v-model="currItem.img" style="width: 50%"></el-input>
        <el-row style="margin-top: 20px"  v-if="currItem.img !== ''">
          <img :src="currItem.img" width="60%" style="border:0px solid red" />
        </el-row>
        <el-button size="mini" type="text" @click="editAdBtn" >编辑</el-button>
      </el-col>
    </el-row>
    <el-pagination v-show="totalPage>0" style="margin-top:20px;" small
                   layout="prev, pager, next"
                   :page-count="totalPage"
                   @current-change="goPage">
    </el-pagination>
    <el-dialog :visible.sync="newAdDialog" v-if="currAd" title="设置">
      <new-ad :ad="currAd" v-on:cancelDialog="getAds(0,lightBoxId)"></new-ad>
    </el-dialog>
  </section>
</template>

<script>
  import newAd from '../appAd/newAd'
  import setDetail from './setDetail'
  import uploadImg from  '@/common/uploadImg'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import errHandler from '@/assets/errHandler'
  export default {
    name: "pptAd",
    components:{uploadImg,setDetail,newAd},
    props:['lightBoxId'],
    data(){
      return {
        adImg:null,
        currItem:null,
        totalPage:0,
        currAds:null,
        newAdDialog:false,
        currAd:null
      }
    },
    watch:{
      lightBoxId(nv,ov){
        if(nv) this.init(nv)
      }
    },
    created(){
      this.init(this.lightBoxId)
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      goPage(val){
        this.getAds(val-1,this.lightBoxId)
      },
      init(lightBoxId){
        this.getAds(0,lightBoxId)
      },
      getAds(pageNo,lightBoxId){
        this.fetch({name:"getAdList",data:{page:pageNo?pageNo:0,lightBoxId}})
          .then(res=>{
            console.log('看下广告列表--------',res)
            this.currAds=res.content
            this.totalPage=res.totalPages
            if(this.currAds.length<=0){
              this.$message({type:'info',message:'当前位置无广告，请新建！'})
              return
            }
            this.currItem=this.currAds[0]
            this.currAds.forEach(item=>{
              if(item.img === undefined){
                Vue.set(item,'img','')
              }
            })
            this.newAdDialog=false
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      checkCurrItem(item){
        console.log('确定',item)
        this.currItem=item
      },
      addBtn(){
        this.currAd={contentType:null,contentValue:null,departmentId:'空',img:null,data:{},lightBoxId:this.lightBoxId}
        this.newAdDialog=true
      },
      editAdBtn(){
        this.currAd=this.currItem
        this.newAdDialog=true
      },
      delItem(e){
        this.$confirm('确认删除？')
          .then(()=> {
            this.fetch({name:"deleteAd",data:{id:e.id}})
              .then(res=>{
                this.$message({type:'success',message:'删除成功！'})
                this.getAds(0,this.lightBoxId)
              })
              .catch(err=>{
                console.log(err)
                errHandler.handle(this,err)
              })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      },
    }
  }
</script>

<style scoped>
.el-icon-error{
  display: none;
  border: 0px solid red;
  position: absolute;
  right: 0px;
  top:5px;
  color:red;
  font-size: small;
}
.imgBox{
  /*border: 1px solid red;*/
  border: 2px solid #bbb;
  font-size: 100px;
  text-align: center;
  color: #bbb;
  width: 300px;
  min-height: 150px;
  margin-top: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.imgBox:hover .el-icon-error{
 display: block;
}
</style>
